<template>
	<section>
		<!--start  面包屑-->
	    <div class="location">
	        <el-breadcrumb separator="/">
		        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
		        <el-breadcrumb-item :to="{path:'/enterprise'}">企业客户</el-breadcrumb-item>
		        <el-breadcrumb-item :to="{path:'/enterprise'}">企业客户列表</el-breadcrumb-item>
		        <el-breadcrumb-item>新增企业客户</el-breadcrumb-item>
	        </el-breadcrumb>
	        <help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			  </help-components>
	    </div>
	     <!--start content-->
   		 <div class="content" id="content"  v-loading.body="loading">
   		 	<h2 style="color: #03b8cc;font-weight: normal;">公司信息</h2>
   		 	<div class="gosi-dox">
	   		 	<div class="gosi-left">
	   		 		<ul>
   		 				<li>
		   		 			<em class="iconfont">&#xe708;</em><span>客户名称</span>
		   		 			<input class="inptwid" type="text" v-model="basicMemberViewVo.memberName" @blur="namenull2" /><br>
		   		 			<p v-if="goName" style="text-align: left;text-indent: 100px;color: #ff4949;">客户名称不能为空！</p>
		   		 		</li>
		   		 		<li>
		   		 			<em class="iconfont">&#xe708;</em><span>归属区域</span>
		   		 			<el-select v-model="basicMemberViewVo.regionCode" placeholder="请选择归属区域">
					      		<el-option
							        v-for="item in options2"
							        :key="item.regionCode"
							        :label="item.regionName"
							        :value="item.regionCode">
							    </el-option>
						    </el-select>
		   		 			<p v-if="guishuquyu" style="text-align: left;text-indent: 100px;color: #ff4949;">归属地不能为空！</p>
		   		 		</li>
		   		 		<!-- 暂时隐藏
		   		 			<li>
		   		 			<span>签约时间</span>
		   		 			<el-date-picker
						      v-model="signDate"
						      type="daterange"
						      placeholder="选择日期范围">
						    </el-date-picker>
		   		 		</li>-->
		   		 		<li>
		   		 			<span>所在地区</span>
			   		 			<el-cascader class="selectWidth" popper-class="kael" :options="detailedAreaList" v-model="ruleForm.detailedArea" :props="areaProps">
								</el-cascader>
		   		 		</li>
   		 			</ul>
	   		 	</div>
	   		 	<div class="gosi-left">
	   		 		<ul>
		   		 		<li>
		   		 			<em class="iconfont">&#xe708;</em><span>客户级别</span>
		   		 			<el-select v-model="basicMemberViewVo.gradeCode" placeholder="请选择客户级别">
					      		<el-option
							        v-for="item in options"
							        :key="item.gradeCode"
							        :label="item.gradeName"
							        :value="item.gradeCode">
							    </el-option>
						    </el-select>
		   		 			<!--<p v-if="inname" style="text-align: left;text-indent: 80px;color: #ff4949;">姓名不能为空！</p>-->
		   		 		</li>
		   		 		<li class="qiyekehuli">

		   		 			<span>邮编</span>
		   		 			<input  type="text" v-model="memberOperatorViewVo.operatorPostCode"  />
		   		 			<!--<p v-if="inname" style="text-align: left;text-indent: 80px;color: #ff4949;">姓名不能为空！</p>-->
		   		 			<span>传真</span>
		   		 			<input  type="text" v-model="memberCompanyViewVo.companyCorpFax"  />
		   		 			<!--<p v-if="inname" style="text-align: left;text-indent: 80px;color: #ff4949;">姓名不能为空！</p>-->
		   		 		</li>
		   		 		<li>
		   		 			<span>详细地址</span>
		   		 			<input class="inptwid" type="text" v-model="memberCompanyViewVo.companyAddress"  /><br>
		   		 		</li>


   		 			</ul>
	   		 	</div>
   		 	</div>
   		 	<div class="personal">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">管理员信息</h2>
   		 		<div class="per-left">
   		 			<ul>
   		 				<li>
		   		 			<em class="iconfont">&#xe708;</em><span>姓名</span>
		   		 			<input class="inptwid" type="text" v-model="memberOperatorViewVo.operatorName" @blur="namenull" /><br>
		   		 			<!---->
		   		 			<p v-if="inname" style="text-align: left;text-indent: 80px;color: #ff4949;">姓名不能为空！</p>
		   		 		</li>
		   		 		<li>
		   		 			<span>电话</span>
		   		 			<input class="inptdun" type="text" v-model="memberOperatorViewVo.operatorTel" style="margin-right: 37px;" />
		   		 			<span>QQ</span>
		   		 			<input class="inptdun" type="text" v-model="memberOperatorViewVo.operatorQq" @keyup="varQq"/>
		   		 			<p v-if="oQq" style="text-align: left;text-indent: 365px;color: #ff4949;position: absolute;">请输入正确QQ</p>
		   		 		</li>
		   		 		<li style="text-align: left;margin-left:58px;">
		   		 			<span>Email</span>
		   		 			<input class="inptdun" type="text" v-model="memberOperatorViewVo.operatorEmail" @keyup="valemail" />
		   		 			<p v-if="oemail" style="text-align: left;text-indent: 40px;color: #ff4949;position: absolute;">请输入正确邮箱</p>
   		 				</li>
   		 			</ul>
   		 		</div>
   		 		<div class="per-right">
   		 			<span>头像</span>
   		 			<el-upload
					    class="avatar-uploader"
					    :class="{uploading:headerImg.uploading}"
					    :action="uploadUrl"
					    :data="headerImg.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess"
					    :on-error="handleAvatarError"
					    :before-upload="beforeAvatarUpload">
					    <img v-if="headerImg.isImgSrc" :src="headerImg.imgSrc" class="avatar">
				    	<i v-else class="avatar-uploader-icon" :class="{'el-icon-plus':!headerImg.uploading,'el-icon-loading':headerImg.uploading}"></i>
					</el-upload>
   		 		</div>
   		 	</div>
         <div class="persZh">
           <div class="shenfen">
             <span class="perSpan">身份证正面</span>
             <el-upload
               class="avatar-shenfen-uploader avatar-uploader"
               :action="uploadUrl"
               :data="certificateImg1.updata"
               :show-file-list="false"
               :on-success="handleAvatarSuccess1"
               :on-error="handleAvatarError1"
               :before-upload="beforeAvatarUpload1">
               <img v-if="certificateImg1.isImgSrc" :src="certificateImg1.imgSrc" class="avatar">
               <i class="avatar-uploader-icon el-icon-plus"  v-else></i>
             </el-upload>
           </div>
           <div class="">
             <img src="../../../img/u676.png" />
           </div>
         </div>
   		 	<div class="persZh">
   		 		<div class="shenfen">
   		 			<span class="perSpan">身份证反面</span>
   		 			<el-upload
					    class="avatar-shenfen-uploader avatar-uploader"
					    :action="uploadUrl"
					    :data="certificateImg2.updata"
					    :show-file-list="false"
					    :on-success="handleAvatarSuccess2"
					    :on-error="handleAvatarError2"
					    :before-upload="beforeAvatarUpload2">
					    <img v-if="certificateImg2.isImgSrc" :src="certificateImg2.imgSrc" class="avatar">
				    	<i class="avatar-uploader-icon el-icon-plus"  v-else></i>
					</el-upload>
   		 		</div>
   		 		<div class="">
   		 			<img src="../../../img/u678.png" />
   		 		</div>
   		 	</div>
         <div class="persZh">
           <div class="shenfen">
             <span class="perSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;&nbsp;&nbsp;&nbsp;片</span>
             <el-upload
               class="avatar-shenfen-uploader avatar-uploader"
               :action="uploadUrl"
               :data="certificateImg7.updata"
               :show-file-list="false"
               :on-success="handleAvatarSuccess7"
               :on-error="handleAvatarError7"
               :before-upload="beforeAvatarUpload7">
               <img v-if="certificateImg7.isImgSrc" :src="certificateImg7.imgSrc" class="avatar">
               <i class="avatar-uploader-icon el-icon-plus" v-else></i>
             </el-upload>
           </div>
         </div>
   		 	<div class="account">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">账号信息</h2>
   		 		<ul class="accoUL accoULzhang">
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>手机</span>
		   		 		<input class="inptdun" type="text" v-model="memberOperatorViewVo.operatorPhone" v-on:keyup="textphnoe" @blur="yanshouji" />
		   		 		<p v-if="inphone" style="text-align: left;text-indent: 80px;color: #ff4949;position: absolute;">{{phonege}}</p>
   		 			</li>
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>账号</span><input id="str" v-model="memberOperatorViewVo.operatorAccount"v-on:keyup="textzhanghao" @blur="isalphanumber" />
   		 				<p v-if="inpu" style="text-align: left;text-indent: 80px;color: #ff4949;">账号不能为空！</p>
   		 			</li>
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>密码</span><input type="password" v-model="memberOperatorViewVo.operatorLoginPassword" v-on:keyup="cnter" @blur="inpasswd"/>
   		 				<p v-if="inpaww" style="text-align: left;text-indent: 80px;color: #ff4949;">密码为6-20位字母或数字！</p>
   		 			</li>
   		 			<li class="accoUL-li">
   		 				<span v-bind:style="{background:ruo}">弱</span><span v-bind:style="{background:zhong}">中</span><span v-bind:style="{background:qing}">强</span>
   		 			</li>
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>确认密码</span><input type="password" v-model="inpasst" @blur="inpasstwo" />
   		 				<p v-if="intwo" style="text-align: left;text-indent: 80px;color: #ff4949;">两次密码必须一致！</p>
   		 			</li>
   		 			<!--<li style="text-align: left;text-indent: 26px;">
   		 				<el-checkbox v-model="checked">发送账号开通邮件</el-checkbox>
   		 			</li>-->
   		 		</ul>
   		 	</div>
   		 	<div class="caiwu">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">财务信息</h2>
   		 		<ul class="accoUL" style="float: left;width: 500px;">
   		 			<li>
   		 				<span>开户名称</span><input v-model="memberOperatorViewVo.operatorInvoiceNane"/>
   		 			</li>
   		 			<li>
   		 				<span>银行账号</span><input v-model="memberOperatorViewVo.operatorInvoiceAccount"/>
   		 			</li>
   		 			<li>
   		 				<span>发票抬头</span><input v-model="memberOperatorViewVo.operatorInvoiceTitle"/>
   		 			</li>
   		 		</ul>
   		 		<ul class="accoUL" style="float: left;width: 500px;">
   		 			<li>
   		 				<span>开户银行</span><input v-model="memberOperatorViewVo.operatorInvoiceBank"/>
   		 			</li>
   		 			<li>
   		 				<span>纳税人识别号</span><input v-model="memberOperatorViewVo.operatorInvoiceTaxId"/>
   		 			</li>
   		 		</ul>
   		 	</div>
   		 	<div class="personal">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">三证上传</h2>
   		 		<template>
				  <el-tabs v-model="activeName">
				    <el-tab-pane label="老版三证" name="first">
				    <div class="sanzheng">
	   		 			<div class="persZh" style="margin-left: 86px;">
		   		 			<div class="shenfen">
			   		 			<span class="perSpan">营业执照</span>
			   		 			<el-upload
								    class="avatar-shenfen-uploader avatar-uploader"
								    :action="uploadUrl"
								    :data="certificateImg3.updata"
								    :show-file-list="false"
								    :on-success="handleAvatarSuccess3"
								    :on-error="handleAvatarError3"
								    :before-upload="beforeAvatarUpload3">
								    <img v-if="certificateImg3.isImgSrc" :src="certificateImg3.imgSrc" class="avatar">
							    	<i v-else class="avatar-uploader-icon el-icon-plus"></i>
								</el-upload>
			   		 		</div>
			   		 	</div>
			   		 	<div class="persZh" style="margin-left: 74px;">
			   		 		<div class="shenfen">
			   		 			<span class="perSpan">税务登记证</span>
			   		 			<el-upload
								    class="avatar-shenfen-uploader avatar-uploader"
								    :action="uploadUrl"
								    :data="certificateImg4.updata"
								    :show-file-list="false"
								    :on-success="handleAvatarSuccess4"
								    :on-error="handleAvatarError4"
								    :before-upload="beforeAvatarUpload4">
								    <img v-if="certificateImg4.isImgSrc" :src="certificateImg4.imgSrc" class="avatar">
							    	<i v-else class="avatar-uploader-icon el-icon-plus"></i>
								</el-upload>
			   		 		</div>
			   		 	</div>
			   		 	<div class="persZh" style="margin-left: 50px;">
			   		 		<div class="shenfen">
			   		 			<span class="perSpan">组织机构代码证</span>
			   		 			<el-upload
								    class="avatar-shenfen-uploader avatar-uploader"
								    :action="uploadUrl"
								    :data="certificateImg5.updata"
								    :show-file-list="false"
								    :on-success="handleAvatarSuccess5"
								    :on-error="handleAvatarError5"
								    :before-upload="beforeAvatarUpload5">
								    <img v-if="certificateImg5.isImgSrc" :src="certificateImg5.imgSrc" class="avatar">
							    	<i v-else class="avatar-uploader-icon el-icon-plus"></i>
								</el-upload>
			   		 		</div>
			   		 	</div>
	   		 		</div>
				    </el-tab-pane>
				    <el-tab-pane label="新版三证" name="second">
				    	<div>
			   		 		<div class="persZh persan">
			   		 			<div class="shenfen">
				   		 			<span class="perSpan">三证合一</span>
				   		 			<el-upload
									    class="avatar-shenfen-uploader avatar-uploader"
									    :action="uploadUrl"
									    :data="certificateImg6.updata"
									    :show-file-list="false"
									    :on-success="handleAvatarSuccess6"
									    :on-error="handleAvatarError6"
									    :before-upload="beforeAvatarUpload6">
									    <img v-if="certificateImg6.isImgSrc" :src="certificateImg6.imgSrc" class="avatar">
								    	<i v-else class="avatar-uploader-icon el-icon-plus"></i>
									</el-upload>
				   		 		</div>
				   		 	</div>
			   		 	</div>
				    </el-tab-pane>
				  </el-tabs>
				</template>
   		 	</div>
   		 	<div class="queren" style="">
   		 		<el-button :disabled="clickBtn" type="primary" @click="save">保存</el-button>
          <el-button @click="$router.push({path:'/enterprise'})">取消</el-button>
   		 	</div>
   		 </div>
   		 <!--end content-->
	</section>
</template>
<script>
	import * as companyMsgDatas from '../../../assets/data/companyMsgData';
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
      	data() {
	        return {
	        	clickBtn:false,                 //请求数据后禁用按钮
	        	helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
	        	/* start upload */
	        	uploadUrl:"/v3/misc/common/uploadFile",

	        	headerImg:{
	        		updata:{
	        			"moduleName":"basic",
						"fileName":""
	        		},
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg1:{
	        		updata:{
	        			"moduleName":"basic",
						"fileName":""
	        		},
	        		fileListLength:0,
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg2:{
	        		updata:{
	        			"moduleName":"basic",
						"fileName":""
	        		},
        			fileListLength:0,
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
            certificateImg7:{
              updata:{
                "moduleName":"basic",
                "fileName":""
              },
              fileListLength:0,
              imgSrc:"",
              isImgSrc:false,
              uploading:false,
              canUpload:true
            },
	        	certificateImg3:{
	        		updata:{
	        			"moduleName":"basic",
						"fileName":""
	        		},
	        		fileListLength:0,
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg4:{
	        		updata:{
	        			"moduleName":"basic",
						"fileName":""
	        		},
	        		fileListLength:0,
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg5:{
	        		updata:{
	        			"moduleName":"basic",
						"fileName":""
	        		},
	        		fileListLength:0,
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	certificateImg6:{
	        		updata:{
	        			"moduleName":"basic",
						"fileName":""
	        		},
	        		fileListLength:0,
	        		imgSrc:"",
	        		isImgSrc:false,
					uploading:false,
					canUpload:true
	        	},
	        	/* end upload */
	        	guishuquyu:false,						//归属区域不能为空
	        	goName:false,							//公司名称是否为空
	        	activeName: 'first',					// 证件切换
	        	radio: '1',
	        	nameoo:'',
	        	loading: false,							// 加载中
	        	imageUrl: '',
	        	dialogImageUrl: '',
	        	oemail:false,							// 验证邮箱
	        	oQq:false,								// 验证QQ
	        	dialogVisible: false,
	        	checked: false,
	        	inpu:false,
	        	qing:false,								// 强
	        	zhong:false,							// 中
	        	ruo:'',									// 弱
	        	disa:'',								// 正面禁用
	        	disa2:'',								// 反面禁用
	        	operatorLoginPassword:'',				// 密码
	        	inpasst:'',								// 确认密码
	        	inpaww:false,
	        	intwo:false,
	        	inname:false,							// 姓名是否为空
	        	inphone:false,							// 手机格式是否正确
	        	phonege:'请输入正确的手机号!',				// 手机号格式提示
	        	qunbu:true,								// 必须输入的信息
	        	options: [],							// 客户级别
			    options2: [],							// 归属区域
			    signDate : null,						// 签约时间
			    shouji:'0',
			    zhanghao:'0',
			    uploadData:{
					"moduleName":"basic"
				},
				basicMemberViewVo:{
					memberName : '',					// 会员名称
					gradeCode : '',						// 会员等级
					regionCode : '',					// 归属区域
					memberSignStartDate : null,			// 签约开始时间
					memberSignEndDate : null,			// 签约结束时间
					companySocialCreditCodeUrl:'',		// 社会信用代码证URL
					companyBusinessLicenceUrl :'',		// 营业执照(待图片上传功能可用后完善)
					companyTaxRegistrationUrl : '',		// 税务登记证(待图片上传功能可用后完善)
					companyOrganizationCodeUrl : '',	// 组织机构代码证(待图片上传功能可用后完善)
				},
				memberOperatorViewVo:{
					operatorName : '',					// 姓名
					operatorTel : '',					// 电话
					operatorQq : '',					// QQ
					operatorEmail : '',					// 邮箱
					operatorPhone : '',					// 手机
					operatorAccount : '',				// 登录账号
					operatorLoginPassword : '',			// 登录密码
					operatorInvoiceNane : '',			// 开户名称
					operatorInvoiceBank : '',			// 开户银行
					operatorInvoiceAccount : '', 		// 银行账号
					operatorInvoiceTaxId : '',			// 纳税人识别号
					operatorInvoiceTitle : '',			// 发票抬头
					operatorPortraitUrl : '',    		// 头像
					operatorIdNumberUrl : '',			// 身份证正面
					operatorIdNumberUrl2 : '',			// 身份证反面
          companyBussinesscardUrl:"",       //名片
					operatorPostCode : '',				// 邮政编码

				},
				memberCompanyViewVo:{
					companyAddress : '',				// 详细地址
					compantRemark : '',					// 备用信息
					provinceCode : '',					// 省份代码
					provinceName : '',					// 省份名称
					areaCode : '',						// 地区代码
					areaName : '',						// 地区名称
					companyCorpFax : '',				// 传真

				},

				 ruleForm: { //公司信息
			          name: '',
			          khnumber:'',
			          region: '',
			          delivery: false,
			          resource: '',
			          desc: '',
			          value6:'',
			        },
		        detailedAreaList: [],
		        areaProps: {
					value: 'treeCode',
					children: 'children',
					label: 'treeName'
				},
				form:{
					youbian:'',
					chuanzhen:'',
				}
				}
	     	},
      	methods: {
      		systemTemplateAjax(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/00100000004"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
      		/* start uploadheadImg  */
    //------------------------头像上传 start--------------------------
			handleAvatarSuccess(res,file,fileList) {
				this.headerImg.uploading = false;
		      	this.headerImg.canUpload = true;
		      	this.headerImg.isImgSrc = true;
				this.headerImg.imgSrc = res;
				this.memberOperatorViewVo.operatorPortraitUrl=res;
			},
			handleAvatarError(err, file , fileList){
				this.headerImg.uploading = false;
		      	this.headerImg.canUpload = true;
		      	this.headerImg.isImgSrc = !!this.headerImg.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload(file) {
				this.headerImg.uploading = true;
		      	this.headerImg.canUpload = false;
		      	this.headerImg.isImgSrc = false;
		      	this.headerImg.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.headerImg.uploading = false;
			      	this.headerImg.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.headerImg.uploading = false;
			      	this.headerImg.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
			/* end uploadheadImg */
//------------------------头像上传 end--------------------------

//-----------------------/* start 身份证正面 */--------------------------
			handleAvatarSuccess1(res, file , fileList) {
				this.certificateImg1.fileListLength = fileList.length;
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
		      	this.certificateImg1.isImgSrc = true;
				this.certificateImg1.imgSrc = res;
				this.memberOperatorViewVo.operatorIdNumberUrl = res;
			},
			handleAvatarError1(err, file , fileList){
				this.certificateImg1.uploading = false;
		      	this.certificateImg1.canUpload = true;
		      	this.certificateImg1.isImgSrc = !!this.certificateImg1.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload1(file) {
				this.certificateImg1.uploading = true;
		      	this.certificateImg1.canUpload = false;
		      	this.certificateImg1.isImgSrc = false;
		      	this.certificateImg1.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg1.uploading = false;
			      	this.certificateImg1.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------* end 身份证正面 * --------------------------

//-------------------*start 身份证反面 * --------------------------
			handleAvatarSuccess2(res, file , fileList) {
				this.certificateImg2.uploading = false;
		      	this.certificateImg2.canUpload = true;
		      	this.certificateImg2.isImgSrc = true;
				this.certificateImg2.imgSrc = res;
				this.memberOperatorViewVo.operatorIdNumberUrl2 = res;
			},
			handleAvatarError2(err, file , fileList){
				this.certificateImg2.uploading = false;
		      	this.certificateImg2.canUpload = true;
		      	this.certificateImg2.isImgSrc = !!this.certificateImg2.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload2(file) {
				this.certificateImg2.uploading = true;
		      	this.certificateImg2.canUpload = false;
		      	this.certificateImg2.isImgSrc = false;
		      	this.certificateImg2.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg2.uploading = false;
			      	this.certificateImg2.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg2.uploading = false;
			      	this.certificateImg2.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------*end 身份证反面 * --------------------------
//-------------------*start 上传名片 * --------------------------
          handleAvatarSuccess7(res, file , fileList) {
            this.certificateImg7.uploading = false;
            this.certificateImg7.canUpload = true;
            this.certificateImg7.isImgSrc = true;
            this.certificateImg7.imgSrc = res;
            this.memberOperatorViewVo.companyBussinesscardUrl = res;
          },
          handleAvatarError7(err, file , fileList){
            this.certificateImg7.uploading = false;
            this.certificateImg7.canUpload = true;
            this.certificateImg7.isImgSrc = !!this.certificateImg7.imgSrc;
            this.Public.openError(this,"上传失败");
          },
          beforeAvatarUpload7(file) {
            this.certificateImg7.uploading = true;
            this.certificateImg7.canUpload = false;
            this.certificateImg7.isImgSrc = false;
            this.certificateImg7.updata.fileName = file.name;

            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG&&!isPNG) {
              this.certificateImg7.uploading = false;
              this.certificateImg7.canUpload = true;
              this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
            }
            if(!isLt2M) {
              this.certificateImg7.uploading = false;
              this.certificateImg7.canUpload = true;
              this.$message.error('上传图片大小不能超过 2MB!');
            }
            return (isPNG || isJPG) && isLt2M;
          },
//-------------------*end 上传名片 * --------------------------


//-------------------*start 营业执照 * --------------------------
			handleAvatarSuccess3(res, file , fileList) {
				this.certificateImg3.uploading = false;
		      	this.certificateImg3.canUpload = true;
		      	this.certificateImg3.isImgSrc = true;
				this.certificateImg3.imgSrc = res;
				this.basicMemberViewVo.companyBusinessLicenceUrl = res;
			},
			handleAvatarError3(err, file , fileList){
				this.certificateImg3.uploading = false;
		      	this.certificateImg3.canUpload = true;
		      	this.certificateImg3.isImgSrc = !!this.certificateImg3.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload3(file) {
				this.certificateImg3.uploading = true;
		      	this.certificateImg3.canUpload = false;
		      	this.certificateImg3.isImgSrc = false;
		      	this.certificateImg3.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg3.uploading = false;
			      	this.certificateImg3.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg3.uploading = false;
			      	this.certificateImg3.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------*end 营业执照 * --------------------------

//-------------------*start 税务登记证 * --------------------------
			handleAvatarSuccess4(res, file , fileList) {
				this.certificateImg4.uploading = false;
		      	this.certificateImg4.canUpload = true;
		      	this.certificateImg4.isImgSrc = true;
				this.certificateImg4.imgSrc = res;
				this.basicMemberViewVo.companyTaxRegistrationUrl = res;
			},
			handleAvatarError4(err, file , fileList){
				this.certificateImg4.uploading = false;
		      	this.certificateImg4.canUpload = true;
		      	this.certificateImg4.isImgSrc = !!this.certificateImg4.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload4(file) {
				this.certificateImg4.uploading = true;
		      	this.certificateImg4.canUpload = false;
		      	this.certificateImg4.isImgSrc = false;
		      	this.certificateImg4.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg4.uploading = false;
			      	this.certificateImg4.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg4.uploading = false;
			      	this.certificateImg4.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------*end 税务登记证 * --------------------------

//-------------------*start 组织机构代码证 * --------------------------
			handleAvatarSuccess5(res, file , fileList) {
				this.certificateImg5.uploading = false;
		      	this.certificateImg5.canUpload = true;
		      	this.certificateImg5.isImgSrc = true;
				this.certificateImg5.imgSrc = res;
				this.basicMemberViewVo.companyOrganizationCodeUrl = res;
			},
			handleAvatarError5(err, file , fileList){
				this.certificateImg5.uploading = false;
		      	this.certificateImg5.canUpload = true;
		      	this.certificateImg5.isImgSrc = !!this.certificateImg5.imgSrc;
		      	this.Public.openError(this,"图片上传失败");
			},
			beforeAvatarUpload5(file) {
				this.certificateImg5.uploading = true;
		      	this.certificateImg5.canUpload = false;
		      	this.certificateImg5.isImgSrc = false;
		      	this.certificateImg5.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg5.uploading = false;
			      	this.certificateImg5.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg5.uploading = false;
			      	this.certificateImg5.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------*end 组织机构代码证 * --------------------------

//-------------------*start 三证合一 * --------------------------
			handleAvatarSuccess6(res, file , fileList) {
				this.certificateImg6.uploading = false;
		      	this.certificateImg6.canUpload = true;
		      	this.certificateImg6.isImgSrc = true;
				this.certificateImg6.imgSrc = res;
				this.basicMemberViewVo.companySocialCreditCodeUrl = res;
			},
			handleAvatarError6(err, file , fileList){
				this.certificateImg6.uploading = false;
		      	this.certificateImg6.canUpload = true;
		      	this.certificateImg6.isImgSrc = !!this.certificateImg6.imgSrc;
		      	this.Public.openError(this,"上传失败");
			},
			beforeAvatarUpload6(file) {
				this.certificateImg6.uploading = true;
		      	this.certificateImg6.canUpload = false;
		      	this.certificateImg6.isImgSrc = false;
		      	this.certificateImg6.updata.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.certificateImg6.uploading = false;
			      	this.certificateImg6.canUpload = true;
		        	this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.certificateImg6.uploading = false;
			      	this.certificateImg6.canUpload = true;
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
//-------------------*end 三证合一 * --------------------------
			// 验证手机格式
			yanshouji(){
				var ostr=this.memberOperatorViewVo.operatorPhone;
		      	var reg=/^(13[0-9]|14[57]|15[012356789]|176|177|18[012356789])\d{8}$/;
				if (reg.test(ostr) != true){
					this.inphone=true;
				}else{
					this.inphone=false;
				}
			},
			// 验证QQ格式
			varQq(){
				var ostr=this.memberOperatorViewVo.operatorQq;
		      	var reg=/[1-9]([0-9]{5,11})/;
				if (ostr!="") {
					if (reg.test(ostr) != true){
						this.oQq=true;
					}else{
						this.oQq=false;
					}
				}else{
					this.oQq=false;
				}


			},
			//  验证邮箱格式
			valemail(){
				var ostr=this.memberOperatorViewVo.operatorEmail;
		      	var reg=/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
		      	if (ostr!="") {
					if (reg.test(ostr) != true){
						this.oemail=true;
					}else{
						this.oemail=false;
					}
				}else{
					this.oemail=false;
				}
			},
			// 账号同步手机号
			textphnoe(){
				if(this.shouji==this.zhanghao){

					this.memberOperatorViewVo.operatorAccount=this.memberOperatorViewVo.operatorPhone;
				}
			},
			textzhanghao(){
				this.zhanghao='1';
			},
			// 验证账号格式
		    isalphanumber() {
		      	var ostr=this.memberOperatorViewVo.operatorAccount;
		      	this.operatorAccount=this.memberOperatorViewVo.operatorAccount;
					if (ostr==""){
						this.inpu=true;
					}else{
						this.inpu=false;
					}
			},
			// 验证密码格式
			inpasswd(){
				var ostr=this.memberOperatorViewVo.operatorLoginPassword;
		      	var reg=/^[a-zA-Z0-9]{6,20}$/;
					if (reg.test(ostr) != true){
						this.inpaww=true;
					}else{
						this.inpaww=false;
					}
			},
			// 判断强度
			cnter(){
				var ostr=this.memberOperatorViewVo.operatorLoginPassword;
				if (ostr.length>=6) {
					if(/[a-z]+/.test(ostr) || /[A-Z0-9]+/.test(ostr) || /[A-Z]+/.test(ostr)){
						this.ruo="#fe8486";
						this.qing="";
						this.zhong="";
					}
					if(/[a-zA-Z]+/.test(ostr) && /[0-9]+/.test(ostr)){
						this.zhong="#f9c842";
						this.ruo="#f9c842";
						this.qing="";
					}
					if(/[a-z]+/.test(ostr) && /[A-Z]+/.test(ostr) && /[0-9]+/.test(ostr)){
						this.qing="#00c292";
						this.zhong="#00c292";
						this.ruo="#00c292"
					}
				}else{
					this.ruo="";
					this.qing="";
					this.zhong="";
				}

			},
			// 验证两次输入密码是否一样
			inpasstwo(){
				if (this.memberOperatorViewVo.operatorLoginPassword==this.inpasst) {
					this.intwo=false;
				}else{
					this.intwo=true;
				}
			},
			// 姓名是否为空
			namenull(){
				if(this.memberOperatorViewVo.operatorName==''){
					this.inname=true;
				}else{
					this.inname=false;
				};
			},
			namenull2(){
				if (this.basicMemberViewVo.memberName=='') {
					this.goName=true
				} else{
					this.goName=false;
				}
			},
			Oerror(){
				this.$notify.error({
		          	message: res.data.msg,
		          	duration: 3000
		        });
			},
			Osuccess(){
				this.$notify({
		          	message: '操作成功！',
		          	type: 'success',
		          	duration: 3000
		        });
			},
			// 提交新增信息
			save(){
				if(this.signDate != null){
					this.basicMemberViewVo.memberSignStartDate = this.signDate[0];
					this.basicMemberViewVo.memberSignEndDate = this.signDate[1];
				}
				if(this.memberOperatorViewVo.operatorPhone!='' && this.memberOperatorViewVo.operatorAccount!='' && this.memberOperatorViewVo.operatorLoginPassword!='' && this.inpasst!=''){
					this.qunbu=false;
				}else{
					this.qunbu=true;
				}

				if(!this.inphone && !this.inpu && !this.inpaww && !this.intwo && !this.inname && !this.qunbu){
					// 加密且大写登录密码
					this.memberOperatorViewVo.operatorLoginPassword = this.md5(this.memberOperatorViewVo.operatorLoginPassword).toUpperCase();
					this.clickBtn=!this.clickBtn;
					this.axios({
						method: 'post',
						url:"/v3/basic/saveMemberCompany/members",
						data:{
							"basicMemberData":this.basicMemberViewVo,
							"memberOperatorData":this.memberOperatorViewVo,
							"memberCompanyData":this.memberCompanyViewVo,
						}
				}).then((res) => {
						this.clickBtn=!this.clickBtn;
						loading: true;
						this.$notify({
				        	message: '操作成功！',
				          	type: 'success',
				          	duration:3000
			        	});
						window.history.go(-1)
				}).catch((err)=>{
					this.clickBtn=!this.clickBtn;
					this.Public.openError(this,err.response.data)
				});

				}else{
					this.$notify.error({
				          	message:'请输入完整信息',
				        });
				}

			},

		},
    	mounted(){
    		/* 请求地区 */
			this.detailedAreaList = companyMsgDatas.areaData;
			// 设置页面高度
	      	var winHieg=document.documentElement.clientHeight;
	      	var cont=document.getElementById("content");
	    	  cont.style.height = winHieg-194+"px";

			// 获取会员级别
	      	this.axios({
				method: 'post',
				url:"/v3/member/grades/listAll",
				data:{}
			}).then((res) => {
					this.options = res.data.list;
					for(var i = 0 ; i < res.data.list.length;i++){
						if(res.data.list[i].gradeDefault == '1'){
							this.gradeCode=res.data.list[i].gradeCode;
							break;
						}
					}
			}).catch((err)=>{
				this.Public.openError(this,err.response.data)
			});
			// 获取区域
	      	this.axios({
				method: 'post',
				url:"/v3/basic/regions/listAll",
				data:{}
			}).then((res) => {
					this.options2 = res.data.list;
			}).catch((err)=>{
				this.Public.openError(this,err.response.data)
			});
			//帮助功能
			this.systemTemplateAjax();
	   		},
		}
</script>

<style scoped>
	/*body{
		overflow-y: auto!important;
	}*/
	input{
		color: #565656;
		font-size: 12px;
	}
	.location{
		padding: 3px 0 15px 0;
	}
	.content{
		background: #fff;
		padding: 15px;
		/*height: 1850px;*/
		overflow: auto!important;
		font-family: "微软雅黑";
		position: relative;
		overflow: auto;
		min-width: 1330px;
	}
	.per-left{
		width: 500px;
		float: left;
		margin-top: 20px;
		margin-left: 23px;
	}
	.per-left li{
		height: 55px;
		text-align: right;
	}
	.per-left li input{
		text-indent: 5px;height: 32px;border-radius:4px;border: 1px solid #cdd9e6 ;
	}
	.per-left li em,.accoUL li em{
		color: #f50;
	}
	.per-left li span{
		margin-right: 8px;
	}
	.per-left li .inptwid{
		width: 400px;
	}
	.per-left li .inptdun{
		width: 162px;
	}
	.personal{
		margin-top: 40px;
		clear: both;
	}
/*上传头像*/
.avatar-uploader {
		display: inline;
	}
.avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader.uploading .el-upload{
  	border: 1px dashed #d9d9d9;
  }
  .avatar-uploader-icon {
  	border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }
  .uploading .avatar-uploader-icon{
  	border-color: transparent;
  }
  .avatar {
    width: 110px;
    height: 110px;
    display: block;
    border-radius: 6px;
  }
  .avatar-shenfen-uploader .avatar {
    width: 220px;
    height: 125px;
    display: block;
  }
	/*end*/
	.per-right{
		width: 300px;
		margin-left: 130px;
		float: left;
		margin-top: 20px;
	}
	.per-right span{
		float: left;
		margin-right: 16px;
	}
	.persZh{
		clear: both;
		margin-left: 10px;
		margin-top: 20px;
		height: 128px;
	}
	.perSpan{
		float: left;
	}
	.el-upload{
		float: left;
	}
	.shenfen{
		width: 460px;
		float: left;
	}
	.el-upload--picture-card{
		width: 125px;
	    height: 125px;
	    line-height: 125px;
	}
	.accoUL{
		text-align: right;
		width: 620px;
		margin-top: 20px;
		margin-bottom: 60px;
		margin-left: 21px;
	}
	.accoUL input{
		width: 400px;
		text-indent: 5px;height: 32px;border-radius:4px;border: 1px solid #cdd9e6 ;
	}
	.accoUL li span{
		margin-right: 10px;
	}
	.accoUL li{
		height: 60px;
	}
	.account{
		margin-top: 70px;
	}
	.account .accoUL-li{
		text-align: left;text-indent: 80px;
		height: 40px;
	}
	.accoUL-li span{
		display: inline-block;
		text-indent: 0;
		text-align: center!important;
		width: 120px;
		height: 20px;
		line-height: 22px;
		background: #e9ecf3;
		color: #fff;
		margin-right: 3px!important;
		font-size: 13px;
	}
	.accoUL p{
		color: #f50;
	}
	.accoULzhang{
		width: 452px;
	}
	.accoULzhang input{
		width: 370px;
	}
	.queren{
    position: fixed;
    bottom: 0px;
    margin-left: -15px;
    width: 87%;
    background: #fff;
    height: 80px;
    z-index: 10;
	}

	.queren a{
		display: inline-block;
		height: 34px;
		line-height: 34px;
		background: #fff!important;
		border: 1px solid #cdd9e6 ;
		color: #666!important;
		width: 86px;
		border-radius:20px;
		text-align: center;
    margin: 20px 20px 0px 10px;
		box-sizing: border-box;
	}
	.queren .baocun{
		color: #fff!important;
		background: #13C19F!important;
		z-index: 100;
		cursor: pointer;
		border: 0;
		margin-left: 30px;
	}
	.content input:hover{
		border-color:#03B8CC ;
		transition: ease-in-out 0.5s;
	}

	.qiangdu{
		background: #fe8486!important;
	}
	.gosi-dox{
		margin-top: 20px;
		margin-bottom: 60px;
		overflow: hidden;
	}
	.gosi-left{
		float: left;
		width: 500px;
	}
	.gosi-right{
		float: left;
		width: 600px;
	}
	.sanzheng{
		margin-top: 40px;
		margin-left: -46px;
	}
	.persZh{
		margin-left: 31px;
	}
	.persan{
		margin-top: 40px;
		margin-left: 40px;
	}
	.gosi-left input{
		width: 400px;
		border: 1px solid #cdd9e6 ;
		height: 36px;
		box-sizing: border-box;
		border-radius:4px ;
		text-indent: 8px;
		margin-left: 8px;
	}
	.gosi-left{
		text-align: right;
	}
	.gosi-left li{
		height: 60px;
	}
	.gosi-left em{
		color: #f50;
	}
	.qiyekehuli{
		text-align: right;
	}
	.qiyekehuli input{
		width: 148px;
		float: left;
	}
	.qiyekehuli span{
		margin-left: 70px;
		float: left;
		line-height: 36px;
	}
</style>
